<template>
  <div class="main">
    <el-card class="box-card">
      <div class="header"></div>
      <div class="content">
        <div class="content-add">
          <el-form>
            <el-form-item label="新增金券">
              <el-input type="number" v-model="amount" autocomplete="off" style="width: 150px"></el-input>
              <el-button type="primary" @click="addVoucher" style="margin-left: 20px">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="content-table">
          <el-table :data="tableData" border>
            <el-table-column label="ID" prop="id" sortable></el-table-column>
            <el-table-column label="数额" prop="amount" sortable></el-table-column>
            <el-table-column label="兑换码" prop="code"></el-table-column>
            <el-table-column label="创建时间" prop="created_time"></el-table-column>
            <el-table-column label="使用者id" prop="user_id"></el-table-column>
            <el-table-column label="使用时间" prop="used_time"></el-table-column>
            <el-table-column label="操作" width="78px">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="removeVoucher(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// id，数额，创建时间，兑换码，使用id，使用时间，（修改，删除）
import {deleteVoucher, newVoucher, voucherList} from "@/http/api/admin";
import response from "@/http/response";

export default {
  name: "VoucherData",
  data() {
    return {
      tableData: [],
      amount: null,
    }
  },
  methods: {

    // 将时间字符串格式转换成”yyyy-MM-dd“
    dateFormat(dateStr) {
      let date = new Date(dateStr)
      return date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate()
    },

    // 新增金券
    async addVoucher() {
      // 判断格式是否合法
      if (this.amount === null || this.amount === ''){
        this.$message({
          message: '金券面额不能为空！',
          type: 'warning'
        })
      } else {
        await newVoucher({
          amount: this.amount
        })
        // 刷新列表
        await this.getVouchers()
      }
    },

    // 获取金券列表
    async getVouchers() {
      let result = await voucherList()
      if (result.code === response.success) {
        let data = result.data
        // 时间格式转换
        for(let i = 0; i < data.length; i ++) {
          data[i].created_time = this.dateFormat(data[i].created_time)
        }
        this.tableData = data
      }
    },

    // 移除某个金券
    async removeVoucher(index) {
      let result =  await deleteVoucher({
        voucherId: this.tableData[index].id
      })

      // 刷新列表
      if (result.code === response.success) {
        await this.getVouchers()
      }
    }


  },
  mounted() {
    // 加载金券列表
    this.getVouchers()
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  .box-card {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    padding: 50px 0 100px;
    .header {}
    .content {
      width: 85%;
      margin: 0 auto;
      .content-add {
        margin-bottom: 30px;
      }
    }
  }
}
</style>